<template>
    <van-popup v-model:show="menuShow" position="left" teleport="body" :style="{ height: '100%' }">
        <div id="nav" @click="menuClick">
            <!-- 菜单路由位置 -->
            <div id="menu-link">
                <router-link to="/">{{ $t("MENU.dashboard") }}</router-link>

                <van-collapse v-model="LanActive">
                    <van-collapse-item :title="$t('MENU.LAN')" name="1" @click.stop="onLv1Click">
                        <router-link to="/LAN" @click="menuClick">{{ $t("MENU.LAN") }}</router-link>
                    </van-collapse-item>
                </van-collapse>
            </div>
            <!-- 多语言位置 -->
            语言：
            <van-button
                v-for="locale in $i18n.availableLocales"
                :key="`locale-${locale}`"
                :value="locale"
                @click="changeLanguage(locale)"
            >{{ locale }}</van-button>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, getCurrentInstance, inject } from 'vue';
const { proxy } = getCurrentInstance()
const menuShow = inject('menuShow') // 接受父组件传值
const LanActive = ref([]);

const menuClick = () => {
    menuShow.value = !menuShow.value;
}
const onLv1Click = () => {
    console.log("LV1click")
}
const changeLanguage = (locale) => {
    proxy.$i18n.locale = locale
}
</script>

<style scoped>
#nav {
    padding: 0 30px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    height: 100%;
    min-width: 60px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}
#menu-link {
    height: 470px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#nav a.router-link-exact-active {
    color: #42b983;
}
</style>